<template>
  <div class="ucenter-content">
    <div class="title">{{ name }}</div>
    <ChartCard :title="'总体容量'">
      <template #chart>
        <div class="chart c1">
          <div class="c1-1" v-for="(item, index) in totalData" :key="index">
            <MiniChartCard :title="item.name">
              <template #chart>
                <div class="c1-1-1">
                  <div class="m1">
                    <BarEcharts
                      :name="item.name"
                      :data="item.total"
                      :color-list="totalDataColor"
                      :unit="typeList[index].unit"
                      @click-bar="getUseDetail"
                    ></BarEcharts>
                  </div>
                  <div class="m2">使用量分布</div>
                  <div class="m3">
                    <PieEcharts
                      :name="usageData[item.name].name"
                      :data="usageData[item.name].detail"
                      :color-list="usageDataColor"
                    ></PieEcharts>
                  </div>
                </div>
              </template>
            </MiniChartCard>
          </div>
        </div>
      </template>
    </ChartCard>
    <ChartCard :title="'已使用容量'" style="position: relative">
      <template #chart>
        <div class="type-select">
          <el-select v-model="curType" :placeholder="'请选择'">
            <el-option v-for="item of typeList" :key="item.value" :value="item.value" :label="'已使用' + item.name"></el-option>
          </el-select>
        </div>
        <div class="chart c2">
          <div class="c2-1">
            <MiniChartCard :title="'容量曲线'">
              <template #chart>
                <LineEcharts :name="`已使用${curName}容量`" :data="usedTotalData[curType].capacity"></LineEcharts>
              </template>
            </MiniChartCard>
          </div>
          <div class="c2-2">
            <MiniChartCard :title="'网域资源使用'">
              <template #chart>
                <div class="c2-2-2">
                  <PieEcharts2 :data="usedTotalData[curType].net" :color-list="netColor"></PieEcharts2>
                  <div class="lenged-label">
                    <div class="lenged-label-item" v-for="(item, i) in usedTotalData[curType].net" :key="i">
                      <div class="item-icon" :style="{ background: netColor[i] }"></div>
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-percent">{{ getNetPercent(item) }}%</div>
                    </div>
                  </div>
                </div>
              </template>
            </MiniChartCard>
          </div>
          <div class="c2-3">
            <MiniChartCard :title="'专业资源使用'">
              <template #chart>
                <BarEchartsSingle :data="usedTotalData[curType].major" :color-list="majorColor"></BarEchartsSingle>
              </template>
            </MiniChartCard>
          </div>
          <div class="c2-4">
            <MiniChartCard :title="'项目资源使用'">
              <template #chart>
                <TProgress :data="usedTotalData[curType].project"></TProgress>
              </template>
            </MiniChartCard>
          </div>
          <div class="c2-4">
            <MiniChartCard :title="'站点资源使用'">
              <template #chart>
                <TProgress :data="usedTotalData[curType].station"></TProgress>
              </template>
            </MiniChartCard>
          </div>
        </div>
      </template>
    </ChartCard>
  </div>
</template>

<script setup lang="ts" name="System">
import { computed, ref, reactive } from "vue";
import ChartCard from "../component/chartCard.vue";
import MiniChartCard from "../component/minChartCard.vue";
import BarEcharts from "../component/barEcharts.vue";
import BarEchartsSingle from "../component/barEchartsSingle.vue";
import PieEcharts from "../component/pieEcharts.vue";
import PieEcharts2 from "../component/pieEcharts2.vue";
import LineEcharts from "../component/lineEcharts.vue";
import TProgress from "../component/progress.vue";

export interface Props {
  name: string;
}
withDefaults(defineProps<Props>(), {
  name: ""
});
const totalData = ref([
  {
    name: "CPU容量",
    total: [
      {
        name: "可用分区1",
        use: 12,
        nouse: 1,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 3 }
        ]
      },
      {
        name: "可用分区2",
        use: 5,
        nouse: 8,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区3",
        use: 8,
        nouse: 5,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 3 }
        ]
      },
      {
        name: "可用分区4",
        use: 10,
        nouse: 3,
        detail: [
          { name: "AFC", value: 5 },
          { name: "CCTV", value: 3 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区5",
        use: 7,
        nouse: 6,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 1 }
        ]
      }
    ]
  },
  {
    name: "内存容量",
    total: [
      {
        name: "可用分区1",
        use: 10,
        nouse: 3,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区2",
        use: 5,
        nouse: 8,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区3",
        use: 8,
        nouse: 5,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 3 }
        ]
      },
      {
        name: "可用分区4",
        use: 10,
        nouse: 3,
        detail: [
          { name: "AFC", value: 5 },
          { name: "CCTV", value: 3 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区5",
        use: 7,
        nouse: 6,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 1 }
        ]
      }
    ]
  },
  {
    name: "存储容量",
    total: [
      {
        name: "可用分区1",
        use: 10,
        nouse: 3,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区2",
        use: 5,
        nouse: 8,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区3",
        use: 8,
        nouse: 5,
        detail: [
          { name: "AFC", value: 3 },
          { name: "CCTV", value: 2 },
          { name: "AFF", value: 3 }
        ]
      },
      {
        name: "可用分区4",
        use: 10,
        nouse: 3,
        detail: [
          { name: "AFC", value: 5 },
          { name: "CCTV", value: 3 },
          { name: "AFF", value: 2 }
        ]
      },
      {
        name: "可用分区5",
        use: 7,
        nouse: 6,
        detail: [
          { name: "AFC", value: 1 },
          { name: "CCTV", value: 5 },
          { name: "AFF", value: 1 }
        ]
      }
    ]
  }
]);
const totalDataColor = ref(["#29D3DAFF", "#D8E0F0FF", "#F6302FFF"]);
const usageData = ref({
  CPU容量: totalData.value[0].total[0],
  内存容量: totalData.value[1].total[0],
  存储容量: totalData.value[2].total[0]
});
const usageDataColor = ref(["#1F8CF2FF", "#00C9C9FF", "#D8E0F0FF"]);
const getUseDetail = (key, name) => {
  const list: any = totalData.value.find(a => a.name === key);
  usageData.value[key] = list.total.find(a => a.name === name);
};

// 已使用容量
const typeList = reactive([
  { name: "CPU", value: "cpu", unit: "核" },
  { name: "内存", value: "memory", unit: "GB" },
  { name: "存储", value: "storage", unit: "GB" }
]);
const curType = ref("cpu");
const curName = computed(() => typeList.find(a => a.value === curType.value)!.name);
const usedTotalData = ref({
  cpu: {
    capacity: [
      { name: "11月1号", value: 300 },
      { name: "11月2号", value: 400 },
      { name: "11月3号", value: 500 },
      { name: "11月4号", value: 600 },
      { name: "11月5号", value: 700 },
      { name: "11月6号", value: 800 }
    ],
    net: [
      { name: "安全生产网", use: 30, noUse: 30 },
      { name: "内部管理网", use: 30, noUse: 20 },
      { name: "外部服务网", use: 20, noUse: 30 },
      { name: "运维管理网", use: 30, noUse: 15 }
    ],
    major: [
      { name: "AFC", value: 3 },
      { name: "CCTV", value: 5 },
      { name: "AFF", value: 2 }
    ],
    project: [
      { name: "fwogrewfewgrfwogrewfewgrewjjtrfwogrewfewgrewjjtrewjjtr", value: 100 },
      { name: "cndovw", value: 67 },
      { name: "cwshuoireq", value: 62 },
      { name: "fevrbwtb", value: 60 },
      { name: "cwshuoireq", value: 35 }
    ],
    station: [
      { name: "fwogrew", value: 84 },
      { name: "cndovw", value: 67 },
      { name: "cwshuoireq", value: 62 },
      { name: "fevrbwtb", value: 60 },
      { name: "cwshuoireq", value: 8 }
    ]
  },
  memory: {
    capacity: [
      { name: "11月1号", value: 700 },
      { name: "11月2号", value: 400 },
      { name: "11月3号", value: 500 },
      { name: "11月4号", value: 600 },
      { name: "11月5号", value: 700 },
      { name: "11月6号", value: 800 }
    ],
    net: [
      { name: "安全生产网", use: 40, noUse: 30 },
      { name: "内部管理网", use: 30, noUse: 30 },
      { name: "外部服务网", use: 20, noUse: 30 },
      { name: "运维管理网", use: 15, noUse: 15 }
    ],
    major: [
      { name: "AFC", value: 7 },
      { name: "CCTV", value: 5 },
      { name: "AFF", value: 2 }
    ],
    project: [
      { name: "fwogrewfewgrewjjtr", value: 100 },
      { name: "cndovw", value: 67 },
      { name: "cwshuoireq", value: 62 },
      { name: "fevrbwtb", value: 10 },
      { name: "cwshuoireq", value: 6 }
    ],
    station: [
      { name: "fwogrew", value: 84 },
      { name: "cndovw", value: 67 },
      { name: "cwshuoireq", value: 62 },
      { name: "fevrbwtb", value: 60 },
      { name: "cwshuoireq", value: 8 }
    ]
  },
  storage: {
    capacity: [
      { name: "11月1号", value: 400 },
      { name: "11月2号", value: 700 },
      { name: "11月3号", value: 500 },
      { name: "11月4号", value: 600 },
      { name: "11月5号", value: 300 },
      { name: "11月6号", value: 800 }
    ],
    net: [
      { name: "安全生产网", use: 30, noUse: 25 },
      { name: "内部管理网", use: 20, noUse: 20 },
      { name: "外部服务网", use: 20, noUse: 20 },
      { name: "运维管理网", use: 20, noUse: 15 }
    ],
    major: [
      { name: "AFC", value: 6 },
      { name: "CCTV", value: 5 },
      { name: "AFF", value: 7 }
    ],
    project: [
      { name: "fwogrewfewgrewjjtr", value: 80 },
      { name: "cndovw", value: 73 },
      { name: "cwshuoireq", value: 70 },
      { name: "fevrbwtb", value: 12 },
      { name: "cwshuoireq", value: 9 }
    ],
    station: [
      { name: "fwogrew", value: 84 },
      { name: "cndovw", value: 67 },
      { name: "cwshuoireq", value: 62 },
      { name: "fevrbwtb", value: 20 },
      { name: "cwshuoireq", value: 18 }
    ]
  }
});
const netColor = ref(["#1F8CF2FF", "#00C9C9FF", "#FFC400FF", "#86C25A"]);
const majorColor = ref(["#1F8CF2FF"]);
const getNetPercent = data => {
  const use = data.use || 0;
  const noUse = data.noUse || 0;
  const total = use + noUse;
  return total ? Math.round((use / total) * 100) : 0;
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.ucenter-content {
  .c1 {
    .c1-1 {
      flex: 1;
      min-width: 450px;
      height: 600px;
      .c1-1-1 {
        display: flex;
        flex-direction: column;
        height: 100%;
        .m1 {
          flex: 1;
        }
        .m2 {
          margin-top: 12px;
        }
        .m3 {
          flex: 1;
        }
      }
    }
  }
  .type-select {
    position: absolute;
    top: -10px;
    right: 0;
    width: 200px;
  }
  .c2 {
    .c2-1 {
      flex: 2;
      min-width: 800px;
      height: 320px;
    }
    .c2-2 {
      flex: 1;
      min-width: 500px;
      height: 320px;
      .c2-2-2 {
        display: grid;
        grid-template-columns: 50% 50%;
        height: 100%;
        .lenged-label {
          display: grid;
          grid-auto-rows: 30px;
          align-content: center;
          padding: 24px;
          .lenged-label-item {
            display: grid;
            grid-template-columns: 20px 1fr 50px;
            align-items: center;
            .item-icon {
              width: 12px;
              height: 12px;
              border-radius: 12px;
            }
            .item-percent {
              font-weight: 700;
            }
          }
        }
      }
    }
    .c2-3 {
      flex: 1.7;
      min-width: 380px;
      height: 320px;
    }
    .c2-4 {
      flex: 1;
      min-width: 380px;
      height: 320px;
    }
  }
}
</style>
